<template>
  <div>
    <h1>
      欢迎登录：{{role}}
    </h1>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-button type="primary" @click="openAdd">请假申请</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="新增请假单" :visible.sync="dialogFormVisible">
      <el-form :model="addForm">
        <el-form-item label="请假人员姓名" :label-width="formLabelWidth">
          <el-input v-model="addForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请假类型" :label-width="formLabelWidth">
          <el-radio v-model="addForm.type" label="0">事假</el-radio>
          <el-radio v-model="addForm.type" label="1">病假</el-radio>
          <el-radio v-model="addForm.type" label="2">婚嫁</el-radio>
          <el-radio v-model="addForm.type" label="3">孕假</el-radio>
          <el-radio v-model="addForm.type" label="4">其他</el-radio>
        </el-form-item>
        <el-form-item label="请假原因" :label-width="formLabelWidth">
          <el-input v-model="addForm.content" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请假时长" :label-width="formLabelWidth">
          <el-input v-model="addForm.days" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请假时间" :label-width="formLabelWidth">
          <el-date-picker
              v-model="addForm.createTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">提交</el-button>
      </div>
    </el-dialog>



    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <template>
        <el-tab-pane label="我的请假" name="first">
          <el-table
              :data="tableDataQJ"
              border
              style="width: 100%"
          >
            <el-table-column
                fixed
                prop="id"
                label="请假序号"
                width="150">
            </el-table-column>
            <el-table-column
                prop="name"
                label="请假人员姓名"
                width="120">
            </el-table-column>
            <el-table-column
                prop="type"
                label="请假类型"
                width="120">
              <template v-slot="s">
                <el-tag v-if="s.row.type==0">事假</el-tag>
                <el-tag v-if="s.row.type==1">病假</el-tag>
                <el-tag v-if="s.row.type==2">婚嫁</el-tag>
                <el-tag v-if="s.row.type==3">孕假</el-tag>
                <el-tag v-if="s.row.type==4">其他</el-tag>
              </template>
            </el-table-column>
            <el-table-column
                prop="content"
                label="请假原因"
                width="200">
            </el-table-column>
            <el-table-column
                prop="days"
                label="请假时长"
                width="200">
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="请假时间"
                width="200">
            </el-table-column>
            <el-table-column
                prop="status"
                label="请假状态"
                width="120">
              <template v-slot="s">
                <el-tag v-if="s.row.status==0">未送审</el-tag>
                <el-tag v-if="s.row.status==1">送审中</el-tag>
                <el-tag v-if="s.row.status==2">完毕</el-tag>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
              <template slot-scope="scope">
                <el-button v-if="scope.row.status==0" @click="shenhe(scope.row.taskId)" type="text" size="small">送审</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </template>

      <el-tab-pane label="我的代办" name="second">
        <el-table
            :data="awaitTableData"
            border
            style="width: 100%">
          <el-table-column
              fixed
              prop="id"
              label="请假序号"
              width="150">
          </el-table-column>
          <el-table-column
              prop="name"
              label="请假人员姓名"
              width="120">
          </el-table-column>
          <el-table-column
              prop="type"
              label="请假类型"
              width="120">
            <template v-slot="s">
              <el-tag v-if="s.row.type==0">事假</el-tag>
              <el-tag v-if="s.row.type==1">病假</el-tag>
              <el-tag v-if="s.row.type==2">婚嫁</el-tag>
              <el-tag v-if="s.row.type==3">孕假</el-tag>
              <el-tag v-if="s.row.type==4">其他</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="content"
              label="请假原因"
              width="200">
          </el-table-column>
          <el-table-column
              prop="days"
              label="请假时长"
              width="200">
          </el-table-column>
          <el-table-column
              prop="times"
              label="请假时间"
              width="200">
          </el-table-column>
          <el-table-column
              prop="status"
              label="请假状态"
              width="120">
            <template v-slot="s">
              <el-tag v-if="s.row.status==0">未送审</el-tag>
              <el-tag v-if="s.row.status==1">送审中</el-tag>
              <el-tag v-if="s.row.status==2">完毕</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status==1" @click="shenhe(scope.row.taskId)" type="text" size="small">送审</el-button>
              <el-button v-if="scope.row.status==1" @click="shenhe(scope.row.taskId)" type="text" size="small">驳回</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="我的已办" name="third">
        <el-table
            :data="handleTableData"
            border
            style="width: 100%">
          <el-table-column
              fixed
              prop="id"
              label="请假序号"
              width="150">
          </el-table-column>
          <el-table-column
              prop="name"
              label="请假人员姓名"
              width="120">
          </el-table-column>
          <el-table-column
              prop="type"
              label="请假类型"
              width="120">
            <template v-slot="s">
              <el-tag v-if="s.row.type==0">事假</el-tag>
              <el-tag v-if="s.row.type==1">病假</el-tag>
              <el-tag v-if="s.row.type==2">婚嫁</el-tag>
              <el-tag v-if="s.row.type==3">孕假</el-tag>
              <el-tag v-if="s.row.type==4">其他</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="content"
              label="请假原因"
              width="200">
          </el-table-column>
          <el-table-column
              prop="days"
              label="请假时长"
              width="200">
          </el-table-column>
          <el-table-column
              prop="times"
              label="请假时间"
              width="200">
          </el-table-column>
          <el-table-column
              prop="status"
              label="请假状态"
              width="120">
            <template v-slot="s">
              <el-tag v-if="s.row.status==0">未送审</el-tag>
              <el-tag v-if="s.row.status==1">送审中</el-tag>
              <el-tag v-if="s.row.status==2">完毕</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status==0" @click="shenhe(scope.row.taskId)" type="text" size="small">送审</el-button>
              <el-button v-if="scope.row.status==1" @click="shenhe(scope.row.taskId)" type="text" size="small">驳回</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>

    </el-tabs>


  </div>
</template>

<script>
export default {
  name: "ActivitiView",
  data() {
    return {
      role: sessionStorage.getItem("role"),
      formInline:{},
      activeName:'first',
      dialogFormVisible:false,
      formLabelWidth: '120px',
      addForm:{},
      tableDataQJ:[],
      awaitTableData:[],
      handleTableData:[],
    }
  }, methods: {
    handleClick(tab){
      if("second"==tab.name){
        console.log("我的代办")
        //this.initSecondData();
      }else if("third"==tab.name){
        console.log("我的已办理")
        //this.initThirdData();
      }else if("first"==tab.name){
        console.log("我的申请")
        //this.initFirstData();
      }
    },
    list(){
      this.axios.get("/service/activiti/listAvticiti",this.formInline).then(res=>{
        this.tableDataQJ=res.data.data;
      })
    },
    handleList(){
      this.axios.get("/service/activiti/myCompletion",
          {params:{status:2}}
      ).then(res=>{
        this.handleTableData=res.data.data;
      })
    },
    awaitList(){
      this.axios.get("/service/activiti/myCompletion",
          {params:{status:1}}
      ).then(res=>{
        this.awaitTableData=res.data.data;
      })
    },
    shenhe(taskId){
      this.axios.post("/service/activiti/check?taskId="+taskId).then(res=>{
        if (res.data.code==200){
          this.$message.success(res.data.msg);
          this.list();
        }else{
          this.$message.error(res.data.msg);
        }
      })
    },
    bohui(taskId){
      this.axios.post("/service/activiti/bohui?taskId="+taskId).then(res=>{
        if (res.data.code==200){
          this.$message.success(res.data.msg);
          this.list();
        }else{
          this.$message.error(res.data.msg);
        }
      })
    },
    openAdd(){
      this.addForm={};
      this.dialogFormVisible=true;
    },
    add(){
      this.axios.post("/service/activiti/save",this.addForm).then(res=>{
        if (res.data.code==200){
          this.$message.success("请假信息录入成功");
          this.dialogFormVisible=false;
          this.list();
        }else{
          this.$message.error("请假信息录入失败");
        }
      })
    }
  }, created() {
    this.handleList();
    this.awaitList();
    this.list();
  }
}
</script>

<style scoped>

</style>